<template>
	<view class="add">
		<view class="conbox" v-if="imgflage" @click="hideimg">
			<view class="con">

				<image mode="widthFix" src="../../../static/images/my/zhifu.png"></image>
				<view class="tip1">保存图片->打开支付宝->扫描保存图片->复制用户ID</view>
				<view class="btn" @click.stop="saveimg">保存图片</view>
			</view>
		</view>

		<view class="erweima">
			<view class="listtop">
				<!-- <label class="iconfont icon-weixinzhifu"></label> -->
				<text>{{name}}支付</text>
			</view>
			<view class="middle">
				<view class="tui-upload-item" v-for="(item,index) in files" :key="index">
					<image :src="item" class='tui-upload-img' @tap="previewImage" mode="aspectFill" :id="item"></image>
					<tui-icon color="#ed3f14" name="close-fill" class="tui-upload-del" :index="index" @click="deleteImage"></tui-icon>
				</view>
				<image @tap="chooseImage" v-if="files.length == 0" src="../../../static/images/icon/greyewm.png"></image>
			</view>
			<view class="bottom">
				<view class="tui-upload-item tui-upload-add" v-if="files.length < 2" hover-class="tui-opcity" :hover-stay-time="150"
				 @tap="chooseImage">
					<text>+上传二维码</text>
				</view>
			</view>

		</view>
		<view class="tip">
			{{explain}}
		</view>
		<view class="box">
			<view class="item">
				<view class="leftitem">姓名  <span>*</span></view>
				<view>
					<input v-model="username" type="text" />
				</view>
			</view>
			<view class="item">
				<view  class="leftitem">账号  <span>*</span></view>
				<view>
					<input v-model="account" type="text" />
				</view>
			</view>
			<view class="item">
				<view  class="leftitem">每单最大 </view>
				<view>
					<input v-model="danmax"  type="number" />
				</view>
			</view>
			<view class="item">
				<view  class="leftitem">每单最小 </view>
				<view>
					<input v-model="danmin"  type="number" />
				</view>
			</view>
			<view class="item">
				<view  class="leftitem">每天最大 </view>
				<view>
					<input v-model="daymax"  type="number" />
				</view>
			</view>
			<view class="item" v-if="id*1 == 2">
				<view  class="leftitem">用户ID  <span>*</span></view>
				<view>
					<input v-model="accountid"  type="number" />
				</view>
			</view>
			<view class="item1" @tap="showimg()" v-if="id*1 == 2">
				<view>获取用户ID?</view>

			</view>
		</view>
		<view class="tip1">
			<view>请核对二维码信息</view>
			<view>上传后点击【确认二维码】</view>
		</view>
		<view class="tijiao" @tap="tijiao">确认二维码</view>
	</view>
</template>

<script>
	import tuiIcon from "@/components/icon/icon";
	var _this;
	export default {
		components: {
			tuiIcon,

		},
		data() {
			return {
				files: [], //最多上传9张图片
				name: '',
				id: '',
				explain: '',
				username: '',
				account: '',
				temppath: '',
				accountid: '',
				danmax:'',
				danmin:'',
				daymax:'',
				imgflage: false
			}
		},
		methods: {
			showimg() {
				this.imgflage = true;
			},
			hideimg() {
				this.imgflage = false;
			},
			tijiao() {
				if (this.username == '' || this.account == '') {
					uni.showToast({
						title: '信息不能为空',
						icon: 'none'
					});
				} else {
					if (this.id == '2') {
						if (this.temppath || this.accountid) {

						} else {
							uni.showToast({
								title: '信息不能为空',
								icon: 'none'
							});
							return;
						}
					}
					var username = this.username.replace(/\s*/g, "");
					var zhanghu = this.account.replace(/\s*/g, "");
					var data = {
						token: uni.getStorageSync('token'),
						ploatform_id: this.id,
						nickname: username,
						account: zhanghu,
						single_max:this.danmax,
						single_min:this.danmin,
						total_max:this.daymax

					}
					console.log(this.temppath)
					if (this.id * 1 == 2) {
						var zhanghuid = this.accountid.replace(/\s*/g, "");
						data.userId = zhanghuid;
					}
					if (this.temppath) {
						data.img_url = this.temppath.data.img_url;
					}
					this.$store
						.dispatch('addqrcode', data)
						.then(res => {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							if (res.data.code == 1) {
								var data = {
									token: uni.getStorageSync('token')
								};

								this.$store.dispatch('qrcodelist', data);
								uni.navigateBack({
									delta: 1
								});
							}
						})
					// addqrcode
					console.log(data)
				}
			},
			saveimg() {
				uni.getImageInfo({
					src: 'http://mobile.suxin88.com:808/zhifu.png',
					success: function(image) {
						console.log('图片信息：', JSON.stringify(image));
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success: function() {
								
								console.log('save success');
								uni.showToast({
									title: '图片保存成功',
									icon: 'none',
									
								});
							}
							
						});
					},
					fail: function() {
						console.log('失败');
					},
				});

			},
			chooseImage: function(e) {
				let that = this;
				if (that.files.length >= 1) {
					this.tui.toast("最多上传1张图片");
					return
				}
				uni.chooseImage({
					count: 9 - that.files.length,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						that.files = that.files.concat(res.tempFilePaths)
						console.log(res.tempFilePaths);
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: 'http://khdjk.suxin88.com:808/uploadfile', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'image',
							formData: {
								token: uni.getStorageSync('token')
							},
							success: (res) => {
								_this.temppath = JSON.parse(res.data);

							}
						});
						//上传功能已去除
						//...
					}
				})
			},
			previewImage: function(e) {
				uni.previewImage({
					current: e.currentTarget.id, // 当前显示图片的http链接
					urls: this.files // 需要预览的图片http链接列表
				})
			},
			deleteImage: function(e) {
				const index = e.index;
				this.files.splice(index, 1);
			}
		},
		onLoad(e) {
			_this = this;
			this.name = e.name;
			this.id = e.id,
				this.explain = e.explain;
		}
	}
</script>
<style lang="scss" scoped src="./index.scss"></style>
